<template>
<div>
<div><p>数据列表</p><el-button @click="created2()">刷新</el-button>
<el-button type="primary" @click="dialogFormVisible = true;addOrUpdateForm;Form={}" >新增品牌</el-button></div>
<div>
<!--新增或修改对话框-->
<el-dialog :title="Form.id==null?'新增':'编辑'" :visible.sync="dialogFormVisible" @close="closeDialog">
<el-form :model="Form">
<el-form-item label="原因类型" :label-width="formLabelWidth">
<el-input v-model="Form.cause" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="排序" :label-width="formLabelWidth">
<el-input v-model="Form.seq" autocomplete="off"></el-input>
</el-form-item>
    <el-form-item label="是否启用">
    <el-switch v-model="Form.status" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0">
    </el-switch>
    </el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false;">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="原因类型"
      width="180" prop="cause">
    </el-table-column>
    <el-table-column
      label="排序"
      width="180" prop="seq">
    </el-table-column>
    <el-table-column
      label="是否启用"
      width="200">
       <template slot-scope="scope">
        <el-switch v-model="scope.row.status" disabled
        active-color="#13ce66" inactive-color="#ff4949"
        active-value="1" inactive-value="0">
       </el-switch>
</template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizeList"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</div>
</div>
</template>
<script>
export default {
  data () {
    return {
      // 呈现数据
      tableData: [],
      // 当前页码
      currentPage: 1,
      // 页大小
      pageSize: 10,
      // 页大小列表
      pageSizeList: [10, 20, 50, 100],
      // 总记录数
      total: 0,
      Form: {},
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  methods: {
    // 获取品牌信息列表
    async getList () {
      // 发送请求查询数据并返回
      const { data: res } = await this.$http.post(`/orders/return/cause/findPage/${this.currentPage}/${this.pageSize}`)
      console.log(res)
      this.tableData = res.data.rows
      this.total = res.data.total
    }, // 添加或编辑窗口打开
    async addOrUpdateForm (id) {
      this.dialogFormVisible = true
      this.form.id = id || 0
      this.form = {}
    },
    async save () {
      this.$http.post(`/orders/return/cause/${this.Form.id == null ? 'insert' : 'update'}`, this.Form)
      this.dialogFormVisible = false
      this.getList()
    }, // 关闭窗口
    async closeDialog () {
      this.getList()
    },
    // 编辑按钮
    async handleEdit (index, row) {
      const id = row.id
      this.dialogFormVisible = true
      const { data: res } = await this.$http.get(`/orders/return/cause/findById/${id}`)
      this.Form = res.data
    },
    // 删除按钮
    async handleDelete (index, row) {
      const id = row.id
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.delete(`/orders/return/cause/delete/${id}`)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 页大小改变
    async handleSizeChange (val) {
      this.pageSize = val
      this.getList()
    },
    // 页码改变
    async handleCurrentChange (val) {
      this.currentPage = val
      this.getList()
    },
    // 页码改变
    async created2 () {
      this.getList()
    }
  }, // 钩子函数
  async created () {
    this.getList()
  }
}
</script>
